<template>
  <div class="cdp anchor-group-wrap" v-if="titles.length > 0">
    <div class="link-wrapper">
      <div class="link-container" v-show="expand">
      </div>
      <i title="收起" class="yu-icon-arr-right1" @click="expand = false"></i>
      <div offset-top="0">
        <div class="el-anchor__wrapper" style="max-height: 100vh">
          <div class="el-anchor">
            <div class="el-anchor ink">
              <span class="el-anchor ink ball" style="top: 0px;display: none"></span>
            </div>
            <div :class="{ 'el-anchor link': true, 'el-anchor link active': current === title.titleId }"
              v-for="title in titles" :key="title.titleId" @click="setActive(title)">
              <i class="el-anchor ink ball"></i>
              <span route="#baseInfo" data-scroll-offset="0" data-route="#baseInfo" :title="title.title"
                class="el-anchor link title">{{ title.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="anchor-box" v-show="!expand" @click="expand = true">
      <span class="anchor-icon yu-icon-menu3"></span>
      <span class="anchor-tit">导航</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    titles: Array,
    default: () => []
  },

  data() {
    return {
      current: this.titles[0] ? this.titles[0].titleId : '',
      expand: true,
      click: false,
      timer: null
    }
  },
  methods: {
    setActive(obj) {
      const { title, titleId } = obj;
      if (title) {
        I
        console.debug(title);
      }
      this.current = titleId;
      this.click = true;
      const dom = document.body.querySelector('#' + titleId);
      dom && dom.scrollIntoView({ behavior: 'smooth' });
      if (!this.timer) {
        this.timer = setTimeout(() => {
          this.click = false;
          clearTimeout(this.timer);
          this.timer = null;
        }, 1000)
      }
    }
  }
}

</script>